<template>
	<view>
		<view v-for="item in searchList" :key="item.cat_id">
			<goodsList :item= "item" :defalutImg="defalutImg"></goodsList>
		</view>
		
		<view class="isEnd" :v-if="isEnd">
				到底啦～
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				isEnd:false,//上拉数据是否加载完毕
				total:0,
				isLoading:false, //上拉节流
				searchList:[],
				defalutImg:'https://ts1.cn.mm.bing.net/th/id/R-C.c01865ee48ed120ca5c2fca74f650d5f?rik=5h5N%2bQsvsonrUA&riu=http%3a%2f%2fimage.uczzd.cn%2f3540545609072632675.jpg%3fid%3d0%26from%3dexport&ehk=GYTFVmJKxQ8On57EZ3%2bBvnMJbzE8463rmr8g%2bU2Kz80%3d&risl=&pid=ImgRaw&r=0',
				queryObj:{
						// 查询关键词 
						query: '', 
						// 商品分类Id 
						// cid: '', 
						// 页码值 
						pagenum: 1, 
						// 每页显示多少条数据 
						pagesize: 10
				}
			}
		},
		/**
		 * 下拉处理
		 */
		onPullDownRefresh(){
			console.log('下拉了')
			// 1. 重置关键数据
			this.queryObj.pagenum = 1
			this.total = 0
			this.isloading = false
			this.searchList = []
			// 2. 重新发起请求 
			this.getSearchList(() => uni.stopPullDownRefresh()) //传递一个函数进去
		},
		/**
		 * 上拉处理
		 */
		onReachBottom(){
			console.log('上拉了')
			this.queryObj.pagenum += 1
			if(this.isLoading) return
				this.getSearchList()
		},
		onLoad(options){
			this.queryObj.query = options.query ? options.query : ' '
			// options.cId ? options.cId : ''
			this.getSearchList()
		},
		beforeDestroy(){
			this.isEnd = false
		},
		methods:{
			/**
			 * 获取商品列表数据
			 */
			async getSearchList(cb){
				this.isLoading = true
				const { data:res } = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
				if(res.meta.status !== 200) return uni.$showMsg()
				this.searchList = [...this.searchList,...res.message.goods]
				console.log(res)
				this.total = res.message.total
				this.isLoading = false
				//如果传递了函数就执行
				cb && cb() 
				
				if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total){
					this.isEnd = true
				}
			}
		}
	}
</script>

<style lang="scss">
		.isEnd{
			margin-top: 40rpx;
			text-align: center;
			color: #e0e7ed;
			font-size: 24rpx;
		}
</style>
